<!DOCTYPE html>
<html>
<head>
	<title>记得</title>
	<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css">
	<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.css">
</head>

<body ng-app="main">
<div id="main" class="container" ng-controller="MainCtrl">
	<input type="text" class="form-control" ng-model="search" />
	<table class="table table-hover table-striped">
		<thead>
			<tr>
				<th>id</th>
				<th>项目</th>
				<th>金额</th>
				<th>组</th>
				<th>时间</th>
			</tr>
		</thead>
		<tbody>
			<tr ng-repeat="item in records | filter : search | limitTo : 10 : start">
				<td ng-bind="item.pk"></td>
				<td ng-bind="item.fields.NAME"></td>
				<td ng-bind="item.fields.PRICE"></td>
				<td ng-bind="item.fields.GROUP"></td>
				<td ng-bind="item.fields.TIME | date : 'yyyy-MM-dd'"></td>
			</tr>
		</tbody>
	</table>
	<hr>
	<div>共 <span ng-bind="pageNumber"></span> 页</div>
	<ul class="pagination">
		<li><a href="javascript:;">首页</a></li>
		<li ng-repeat="i in pages" ng-click="toPage(i*10)"><a href="javascript:;" ng-bind="i+1"></a></li>
		<li><a href="javascript:;">尾页</a></li>
	</ul>
</div>
<div class="container">
	<div id="highchart"></div>
</div>
<script type="text/javascript" src="//cdn.bootcss.com/jquery/1.11.1/jquery.js"></script>
<script type="text/javascript" src="//cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/modules/data.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/modules/drilldown.js"></script>
<script type="text/javascript">
app = angular.module('main', [])
// function get_result(r) {
// 	arr = []
// 	angular.froEach(r, function (i,item) {
// 		arr.push(item.fields)
// 	})
// }
app.controller('MainCtrl', ['$scope','$http', function (scope,http) {
	http.get('/list_record').success(function (data) {
		var result = JSON.parse(data.result)

		
		scope.records = result
		scope.pageNumber = Math.ceil(result.length / 10)
		scope.pages = []
		for( i = 0 ;i < scope.pageNumber;i++ ){
			scope.pages.push(i)
		}
		brandsData = []
		drilldownSeries = []

		var brandsDataCells = {}
		var drilldownSeriesCells = {}
		angular.forEach(result, function (item, i) {
			
			group = item.fields.GROUP
			if( !brandsDataCells[ group ] ){
				brandsDataCells[ group ] = {
					"name": group,
					"y": 0,
					"drilldown": group
				};
				drilldownSeriesCells[ group ] = {
					"name": group,
					"id": group,
					"data": []
				}
			}
			name = item.fields.NAME
			price = item.fields.PRICE
			time = item.fields.TIME

			var datacell = [ name , price ]

			drilldownSeriesCells[ group ][ "data" ].push( datacell )
			brandsDataCells[ group ][ "y" ] += price
			
		})
		for( key in brandsDataCells ){
			brandsData.push( brandsDataCells[key] )
		}
		for( key in drilldownSeriesCells ){
			drilldownSeries.push( drilldownSeriesCells[key] )
		}
		show_chart(brandsData ,drilldownSeries)
	})
	
	scope.records = []
	scope.start = 0
	scope.toPage = function (num) {
		scope.start = num
	}
}])

// highchart
function show_chart(brandsData ,drilldownSeries) {

    // Create the chart
    $('#highchart').highcharts({
        chart: {
        	// 柱形图
            type: 'column'
        },
        title: {
            text: '标题'
        },
        subtitle: {
            text: '点击查看详细'
        },
        xAxis: {
            type: 'category',
            title: {
            	text: '组'
            }
        },
        yAxis: {
            title: {
                text: '金额'
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                borderWidth: 2,
                dataLabels: {
                    enabled: true,
                    format: '{point.y:.1f}'
                }
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b><br/>'
        },
        series: [{
            name: '组',
            colorByPoint: true,
            data: brandsData
        }],
        drilldown: {
            series: drilldownSeries
        }
    });
}

</script>
</body>
</html>